//引入样式
require('../../assets/css/reset.css');
require('../../assets/fonts/iconfont.css');
require('../../assets/css/tabbar.less')
require('./index.less');
//引入模块
let dom = require('../../utils/dom.js')
let axios = require('../../utils/axios.js')

//引入swiper
require('../../libs/swiper/swiper-bundle.min.css')
const Swiper = require('../../libs/swiper/swiper-bundle.min.js')


window.addEventListener('load', function () {
    //渲染底部导航
    dom.tabbar('index')

    //初始化swiper
    var mySwiper = new Swiper('.swiper', {
        loop: true, // 循环模式选项
        autoplay: {
            delay: 2000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
    })

    //发请求获取用户个人信息
    axios.get('/api/user/info').then(res => {
        let data = res.data.data;
        //渲染排名
        dom.get('.rank_num').textContent = data.ranking;
        //渲染徽章
        dom.get('.badge_num').textContent = data.badges;
    });

    //发请求获取打卡信息
    function renderClock () {
        axios.get('/api/user/clockInInfo').then(res => {
            //渲染打卡天数
            dom.get('.clock_num').textContent = res.data.data.clockCount;

            let btn = dom.get('.clockBtn');
            if (res.data.data.isClockIn) {
                //已打卡
                btn.disabled = true; //禁用
                btn.style.backgroundColor = 'rgba(0,0,0,0.4)';
                btn.textContent = '已打卡';
            }
        });
    }
    renderClock();
    //绑定打卡事件
    dom.get('.clockBtn').addEventListener('click', function () {
        //发请求打卡
        axios.post('/api/user/clockIn').then(res => {
            if (res.data.errno === 0) {
                renderClock();
            }
        });
    });

})